<template>
	<div class="dashboard-container">
		<el-card style="height: 120px; margin-bottom: 20px">
			<!-- 给el-form绑定form -->
			<el-form label-width="80px" :model="form" :inline="true">
				<el-form-item>
					<el-input v-model="form.name" placeholder="标题/发布人搜索" clearable />
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.phone" placeholder="联系电话" clearable />
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.userphone" placeholder="发布人手机号" clearable />
				</el-form-item>
				<el-form-item>
					<el-select v-model="form.classifyid" placeholder="分类筛选" filterable>
						<el-option v-for="a in reqCategory1" :key="a.id" :label="a.title" :value="a.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker v-model="form.paytime" type="date" placeholder="开始日期筛选" size="default" />
				</el-form-item>
				<el-form-item>
					<el-date-picker v-model="form.endtime" type="date" placeholder="结束日期筛选" size="default" />
				</el-form-item>
				<el-form-item label="是否推送">
					<el-select v-model="form.fasong" placeholder="推送or未推送">
						<el-option v-for="a in reqCategory2" :key="a.id" :label="a.name" :value="a.id"></el-option>
					</el-select>
				</el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="searchclick"
					style="margin-left: 12px">筛选</el-button>
				<el-button @click="resetSearch">重置</el-button>
				<el-button @click="addrenyuan" type="success">添加</el-button>
				<el-button @click="daochu" type="success">导出excel</el-button>
			</el-form>

		</el-card>
		<el-table :data="tableData" border>
			<el-table-column prop="id" label="ID" align="center" width="150">
			</el-table-column>
			<!-- <el-table-column prop="name" label="名称" align="center">
      </el-table-column> -->
			<el-table-column prop="classifyid" label="分类" align="center" width="150">
				<template slot-scope="scope">
					<el-tag type="success">{{
            scope.row.classifyid | classifyidfilter(that)
          }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="title" label="标题" align="center">
			</el-table-column>
			<!--      <el-table-column prop="content" label="介绍" align="center">-->
			<!--      </el-table-column>-->
			<el-table-column prop="userphone" label="发布人手机" align="center">
			</el-table-column>
			<el-table-column prop="nickname" label="发布人" align="center">
			</el-table-column>
			<el-table-column prop="city" label="城市" align="center">
			</el-table-column>
			<el-table-column prop="name" label="联系人" align="center">
			</el-table-column>
			<el-table-column prop="phone" label="联系电话" align="center">
			</el-table-column>
			<el-table-column prop="buynum" label="已售" align="center">
			</el-table-column>
			<el-table-column prop="addtime" label="发布时间" align="center">
				<template slot-scope="scope">
					{{ scope.row.addtime | datefilter }}
				</template>
			</el-table-column>
			<el-table-column prop="city" label="城市" align="center">
			</el-table-column>
			<el-table-column prop="county" label="区县" align="center">
			</el-table-column>
			<el-table-column prop="是否推送" label="未推送 or 已推送" align="center">
				<template slot-scope="{ row }">
					<el-tag :type="row.fasong == 1 ? 'primary' : 'success'">{{
              row.fasong | statefilter
            }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="300">
				<template slot-scope="scope">
					<el-button type="primary" @click="changerenyuan(scope.row)" size="small">修改</el-button>
					<el-button type="danger" @click="deldel(scope.row)" size="small">推送</el-button>
					<el-button type="primary" @click="delpro(scope.row)" size="small">删除</el-button>
					<el-button type="success" @click="visitRecord(scope.row)" size="small">访问记录</el-button>
					<el-button style="margin-top: 10px;" type="info" @click="updateNum(scope.row)"
						size="small">更新业务多数量</el-button>
				</template>
			</el-table-column>
		</el-table>
		<Pagination2 :currentPage="this.form.pageNo" :size="this.form.pageSize" :total="total"
			@changelimit="changelimit" @changecurrentPage="changecurrentPage"></Pagination2>
		<add ref="add" @refresh="refresh"></add>
		<!-- 访问记录 -->
		<visitRecord ref="visit"></visitRecord>
	</div>
</template>

<script>
	import {
		servetypeRecommend,
		delcopywritingdel,
		gettypelist,
		postprocuredel,
		tixianlistRecommend,
		procureLogs,
		procuregxsl
	} from '@/api/servetypeIndex'
	import add from "./modules/add";
	import visitRecord from "./modules/visitRecord";
	export default {
		name: "Dashboard",
		components: {
			add,
			visitRecord
		},
		data() {
			return {
				that: this,
				reqCategory1: [],
				reqCategory2: [{
						id: 0,
						name: "全部"
					},
					{
						id: 1,
						name: "未推送"
					},
					{
						id: 2,
						name: "已推送"
					},
				],
				form: {
					name: "",
					userphone: "",
					classifyid: "",
					fasong: 0,
					phone: "",
					paytime: "",
					endtime: "",
					pageNo: 1,
					pageSize: 15,
				},
				reqCategoryLoaded: false, // 新增标志
				total: 0,
				tableData: [],
			};
		},
		// beforeCreate() {
		//   that = this;
		// },
		filters: {
			classifyidfilter(val, that) {
				if (that.reqCategoryLoaded) {
					// 检查标志
					const matchingCategory = that.reqCategory1.find(
						(item) => item.id === val
					);
					return matchingCategory ? matchingCategory.title : "";
				}
				return "";
			},
			statefilter(val) {
				if (val == 1) {
					return "未推送";
				} else {
					return "已推送";
				}
			},
			datefilter(val) {
				if (val) {
					var date = new Date(parseInt(val) * 1000);
					var Year = date.getFullYear();
					var Moth =
						date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1;
					var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var Hour =
						date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var Minute =
						date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var Sechond =
						date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					var GMT =
						Year +
						"-" +
						Moth +
						"-" +
						Day +
						"   " +
						Hour +
						":" +
						Minute +
						":" +
						Sechond;

					return GMT;
				} else {
					return "";
				}
			},
		},
		methods: {
			//访问记录
			visitRecord(v) {
				this.$refs.visit.initData(v)
			},
			searchclick() {
				this.getcouponlist1();
			},
			async daochu() {
				let param = {
					phone: this.form.phone,
					name: this.form.name,
					classifyid: this.form.classifyid,
					fasong: this.form.fasong,
					userphone: this.form.userphone,
					paytime: this.form.paytime == "" ?
						"" : Math.floor(new Date(this.form.paytime).getTime() / 1000),
					endtime: this.form.endtime == "" ?
						"" : Math.floor(new Date(this.form.endtime).getTime() / 1000),
				};
				// this.$router.push({ path: "https://api.suishilian.com/admin/exceldc", query: param });
				// const externalLinkWithParams = `http://127.0.0.1:8082/admin/excelshtk?phone=${param.phone}&nickname=${param.nickname}&status=${param.status}`;
				const externalLinkWithParams =
					`http://zdb.suishilian.com/admin/excelprocures?phone=${param.phone}&name=${param.name}&classifyid=${param.classifyid}&fasong=${param.fasong}&userphone=${param.userphone}&paytime=${param.paytime}&endtime=${param.endtime}`;

				window.location.href = externalLinkWithParams;
			},
			resetSearch() {
				this.form.name = "";
				this.form.fasong = 0;
				this.form.classifyid = "";
				this.form.phone = "";
				this.form.userphone = "";
				this.form.paytime = "";
				this.form.endtime = "";
				this.getcouponlist1();
			},
			addrenyuan() {
				this.$refs.add.add();
			},
			// 子传父:自定义事件
			refresh() {
				this.getcouponlist1();
			},
			async gettypelist() {
				let result = await gettypelist({
					adminid: Number(localStorage.getItem('userId'))
				});
				console.log(result);
				if (result.code == 0) {
					this.reqCategory1 = result.data;
					this.reqCategoryLoaded = true; // 设置标志为 true
				}
			},
			async getcouponlist1() {
				// let result = await servetypeRecommend(this.form);
				let param = {
					paytime: this.form.paytime == "" ?
						"" : Math.floor(new Date(this.form.paytime).getTime() / 1000),
					endtime: this.form.endtime == "" ?
						"" : Math.floor(new Date(this.form.endtime).getTime() / 1000),
				};
				let result = await servetypeRecommend({
					name: this.form.name,
					fasong: parseInt(this.form.fasong),
					classifyid: parseInt(this.form.classifyid),
					phone: this.form.phone,
					userphone: this.form.userphone,
					...param,
					pageNo: this.form.pageNo,
					pageSize: this.form.pageSize,
					adminid: Number(localStorage.getItem('userId'))
				});
				// console.log(result);
				if (result.code == 0) {
					if (result.data.data != []) {
						this.tableData = result.data.data;
						this.total = result.data.totalCount;

						this.tableData.forEach((item, index) => {
							// if (item.iamges != "") {
							//   this.$set(item, "images", item.images.split(","));
							// }
						});
						console.log("最后", this.tableData);
					}
				}
			},
			changelimit(val) {
				this.form.pageSize = val;
				this.getcouponlist1();
			},
			changecurrentPage(val) {
				this.form.pageNo = val;
				this.getcouponlist1();
			},
			changerenyuan(val) {
				this.$refs.add.edit(val);
			},
			async deldel(val) {
				let result = await delcopywritingdel({
					id: val.id,
					adminid: Number(localStorage.getItem('userId'))
				});
				if (result.code == 0) {
					this.$message({
						showClose: true,
						message: "推送成功",
						type: "success",
					});
					this.getcouponlist1();
				}
			},
			async delpro(val) {
				let result = await postprocuredel({
					id: val.id,
					adminid: Number(localStorage.getItem('userId'))
				});
				if (result.code == 0) {
					this.$message({
						showClose: true,
						message: "删除成功",
						type: "success",
					});
					this.getcouponlist1();
				}
			},
			// 更新业务多数量按钮点击事件
			async updateNum(val) {
				this.$confirm('确定更新业务多数量?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.subUpdataNum(val)
				}).catch(() => {

				});
			},
			async subUpdataNum(val) {
				let result = await procuregxsl({
					id: val.id,
				});
				if (result.code == 0) {
					this.$message({
						showClose: true,
						message: "更新成功",
						type: "success",
					});
					this.getcouponlist1();
				}
			}
		},
		watch: {
			"form.name": {
				handler(newVal) {
					if (newVal == "") {
						this.getcouponlist1();
					}
				},
			},
		},
		mounted() {
			this.getcouponlist1();
			this.gettypelist();
		},
	};
</script>

<style lang="scss" scoped>
	// .dashboard {
	//   &-container {
	//     margin: 30px;
	//   }
	//   &-text {
	//     font-size: 30px;
	//     line-height: 46px;
	//   }
	// }
</style>